<template>
  <div>
    <div style="width: 100%; background: #fff; padding: 17px 32px 0 32px">
      <a-page-header
        style="padding: 0; margin-bottom: 10px"
        :title="goodsId ? '编辑商品' : '添加商品'"
        @back="$router.back()"
      />
      <a-tabs v-model="activeTab">
        <a-tab-pane key="1" tab="基础信息"></a-tab-pane>
        <a-tab-pane key="2" tab="图文设置"></a-tab-pane>
        <a-tab-pane key="3" tab="规格库存"></a-tab-pane>
      </a-tabs>
    </div>
    <!-- 表单区域 -->
    <a-card style="margin: 24px" :bordered="false">
      <a-form-model
        ref="ruleForm"
        :rules="formRules"
        :model="form"
        :label-col="{ span: 3 }"
        :wrapper-col="{ span: 12 }"
      >
        <!-- 基础信息 -->
        <div v-show="activeTab == 1" style="padding-left: 8px">
          <h4
            style="
              font-size: 16px;
              font-family: PingFangSC-Medium;
              line-height: 24px;
              color: rgba(0, 0, 0, 0.85);
              margin-bottom: 20px;
            "
          >
            基础信息
          </h4>
          <a-form-model-item label="商品名称" prop="name">
            <a-input placeholder="请输入商品名称" v-model="form.name" :disabled="true" />
          </a-form-model-item>
          <a-form-model-item label="商品货号" prop="goods_no">
            <a-input placeholder="请输入商品货号" v-model="form.goods_no" :disabled="true" />
          </a-form-model-item>
          <a-form-model-item label="商品分类" hasFeedback prop="cat_id">
            <a-tree-select
              :disabled="true"
              v-model="form.cat_id"
              style="width: 468px"
              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              placeholder="请选择分类"
              allow-clear
              multiple
              tree-default-expand-all
            >
              <a-tree-select-node
                v-for="(item0, index0) of catList"
                :key="index0"
                :value="item0.id"
                :title="item0.name"
              >
                <a-tree-select-node
                  v-if="item0.children.length > 0"
                  v-for="(item1, index1) of item0.children"
                  :key="index0 + '-' + index1"
                  :value="item1.id"
                  :title="item1.name"
                >
                  <a-tree-select-node
                    v-if="item1.children.length > 0"
                    v-for="(item2, index2) of item1.children"
                    :key="index0 + '-' + index1 + '-' + index2"
                    :value="item2.id"
                    :title="item2.name"
                  />
                </a-tree-select-node>
              </a-tree-select-node>
            </a-tree-select>
          </a-form-model-item>
          <a-form-model-item label="供货商名称">
            <a-input placeholder="" v-model="form.supplier.name" :disabled="true" />
          </a-form-model-item>
          <a-divider />
          <h4
            style="
              font-size: 16px;
              font-family: PingFangSC-Medium;
              line-height: 24px;
              color: rgba(0, 0, 0, 0.85);
              margin-bottom: 20px;
            "
          >
            价格设置
          </h4>
          <a-form-model-item label="批发价格" prop="g_price">
            <a-input-number
              style="width: 468px"
              placeholder="请输入"
              v-model="form.wholesale_price"
              :precision="2"
              suffix="元"
              :min="0"
              :disabled="true"
            />
          </a-form-model-item>
          <a-form-model-item label="铺货价格" prop="g_price">
            <a-input-number
              style="width: 468px"
              placeholder="请输入"
              v-model="form.g_price"
              :precision="2"
              suffix="元"
              :min="0"
              :disabled="true"
            />
          </a-form-model-item>
          <a-form-model-item label="建议零售价" prop="g_price">
            <a-input-number
              style="width: 468px"
              placeholder="请输入"
              v-model="form.original_price"
              :precision="2"
              suffix="元"
              :min="0"
              :disabled="true"
            />
          </a-form-model-item>
          <a-form-model-item label="原价" prop="g_original_price">
            <a-input-number
              style="width: 468px"
              placeholder="请输入"
              v-model="form.g_original_price"
              :precision="2"
              prefix="￥"
              suffix="元"
              :min="0"
              :disabled="true"
            />
          </a-form-model-item>
          <a-form-model-item label="商品单位" prop="g_unit">
            <a-input placeholder="请输入商品单位" v-model="form.g_unit" :disabled="true" />
          </a-form-model-item>
          <h4
            style="
              font-size: 16px;
              font-family: PingFangSC-Medium;
              line-height: 24px;
              color: rgba(0, 0, 0, 0.85);
              margin-bottom: 20px;
            "
          >
            商品设置
          </h4>
          <a-form-model-item label="起购数量" prop="g_shop_count">
            <a-input-number
              style="width: 468px"
              :min="0"
              placeholder="请输入起购数量"
              v-model="form.original_price"
              suffix="件"
              :disabled="true"
            />
          </a-form-model-item>
          <a-divider />
          <h4
            style="
              font-size: 16px;
              font-family: PingFangSC-Medium;
              line-height: 24px;
              color: rgba(0, 0, 0, 0.85);
              margin-bottom: 20px;
            "
          >
            物流设置
          </h4>
          <a-form-model-item label="发货方式">
            <a-checkbox-group v-model="form.g_send_type" :disabled="true">
              <a-checkbox value="1"> 转单 </a-checkbox>
              <a-checkbox value="2"> 采购 </a-checkbox>
            </a-checkbox-group>
          </a-form-model-item>
        </div>
        <!-- 图文设置 -->
        <div v-show="activeTab == 2" style="padding-left: 8px">
          <a-form-model-item label="商品缩略图" prop="g_s_pic_url">
            <cyyUploadImg :imgSrc="form.g_s_pic_url"> </cyyUploadImg>
          </a-form-model-item>
          <a-form-model-item label="商品轮播图" prop="g_pic_list">
            <cyyUploadImg dataType="list" :imgList.sync="form.g_pic_list"> </cyyUploadImg>
          </a-form-model-item>

          <a-form-model-item label="图文详情">
            <WangEditor :value="desc" :disabled="true"></WangEditor>
            <a-textarea :hidden="true" v-model="form.desc" :disabled="true" />
          </a-form-model-item>
        </div>

        <!-- 规格库存 -->
        <div v-show="activeTab == 3">
          <h1 class="form-title">商品库存</h1>
          <a-form-model-item
            v-if="isAttr !== '1'"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="商品库存"
            prop="num"
          >
            <a-input-number
              style="width: 468px"
              placeholder="请填写库存"
              v-model="form.num"
              :step="1"
              suffix="件"
              :disabled="true"
            />
          </a-form-model-item>
          <a-form-model-item v-else :labelCol="labelCol" :wrapperCol="wrapperCol" label="商品库存">
            <a-input-number
              style="width: 468px"
              placeholder="请填写库存"
              :disabled="true"
              v-model="form.num"
              :step="1"
              suffix="件"
            />
          </a-form-model-item>
          <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="商品货号" hasFeedback>
            <div class="item-table">
              <a-input style="width: 468px" placeholder="请填写商品货号" :disabled="true" v-model="form.goods_no" />
            </div>
          </a-form-model-item>
          <el-divider style="margin: 24px 0"></el-divider>

          <h1 class="form-title">商品规格</h1>
          <a-form-item style="margin-bottom: 24px" :labelCol="labelCol" :wrapperCol="wrapperCol" label="是否使用规格">
            <!-- :disabled="form.cloud_goods_id > 0" -->
            <a-radio-group v-model="form.use_attr" @change="onChangeAttr" :disabled="true">
              <a-radio value="1"> 使用 </a-radio>
              <a-radio value="0"> 不使用 </a-radio>
            </a-radio-group>
          </a-form-item>

          <!-- && productType == 0 -->
          <a-form-model-item
            v-if="isAttr == 1"
            :labelCol="{ xs: { span: 0 }, sm: { span: 0 } }"
            :wrapperCol="{ xs: { span: 24 }, sm: { span: 24 } }"
          >
            <a-row style="margin-bottom: 24px">
              <a-col :span="2" class="guige-label">商品规格：</a-col>
              <a-col :span="22">
                <a-select
                  show-search
                  placeholder="请选择规格类型"
                  option-filter-prop="children"
                  style="width: 468px"
                  :filter-option="filterOption"
                  @change="attrSelectChange"
                >
                  <a-select-option v-for="(attr, attrIndex) of attrList" :key="attrIndex" :value="attrIndex">
                    {{ attr.name }}
                  </a-select-option>
                </a-select>
              </a-col>
            </a-row>

            <a-row :style="{ marginTop: '10px', marginBottom: '24px' }">
              <a-col :span="2" class="guige-label">规格组：</a-col>
              <a-col :span="22">
                <div style="width: 468px">
                  <a-input v-model="addAttrData.groupName" placeholder="添加规格组">
                    <a-icon @click="addAttrGroup" slot="addonAfter" type="plus" />
                  </a-input>
                </div>
              </a-col>
            </a-row>

            <a-row>
              <a-col :span="2" class="guige-label">商品规格：</a-col>
              <a-col :span="22">
                <a-row
                  style="padding: 10px"
                  :gutter="0"
                  :style="{ border: '1px solid #f0f0f0', marginBottom: '24px' }"
                  v-for="(attr1, index1) of AttrGroupList"
                  :key="index1"
                >
                  <a-row>
                    <el-tag
                      type="info"
                      effect="plain"
                      size="medium"
                      closable
                      :disable-transitions="false"
                      @close="delAttrGroup(index1)"
                    >
                      {{ attr1.attr_group_name }}
                    </el-tag>
                  </a-row>
                  <a-row align="middle" type="flex">
                    <span style="margin: 10px 10px 0px 0" v-for="(attr2, index2) of attr1.attr_list" :key="index2">
                      <el-tag
                        type="info"
                        effect="plain"
                        size="medium"
                        :disable-transitions="false"
                        @close="delAttr(index1, index2)"
                        closable
                      >
                        {{ attr2.attr_name }}
                      </el-tag>
                    </span>

                    <span style="margin: 10px 10px 0px 0">
                      <a-input-search
                        class="add-guige"
                        @search="(e) => addAttr(e, index1, attr1.attr_group_name)"
                        size="small"
                        placeholder="添加规格值"
                      >
                        <a-icon slot="enterButton" type="plus" />
                      </a-input-search>
                    </span>
                  </a-row>
                </a-row>
              </a-col>
            </a-row>

            <a-row>
              <a-col :span="2" class="guige-label"></a-col>
              <a-col :span="22">
                <a-table
                  v-if="GoodsAttr.length > 0"
                  ref="table"
                  :columns="attrColumns"
                  bordered
                  :dataSource="getGoodsAttrList"
                  size="small"
                  :row-key="(r, i) => JSON.stringify(r)"
                  :pagination="false"
                  class="guige-table"
                >
                  <div slot="numDropdown" slot-scope="setSelectedKeys, selectedKeys" style="padding: 8px">
                    <a-input-search
                      @search="(e) => settingAll(e, setSelectedKeys, selectedKeys)"
                      size="small"
                      placeholder="批量设置"
                    >
                      <a-icon slot="enterButton" type="plus" />
                    </a-input-search>
                  </div>
                  <div slot="priceDropdown" slot-scope="setSelectedKeys, selectedKeys" style="padding: 8px">
                    <a-input-search
                      @search="(e) => settingAll(e, setSelectedKeys, selectedKeys)"
                      size="small"
                      placeholder="批量设置"
                    >
                      <a-icon slot="enterButton" type="plus" />
                    </a-input-search>
                  </div>
                  <div slot="originalPriceDropdown" slot-scope="setSelectedKeys, selectedKeys" style="padding: 8px">
                    <a-input-search
                      @search="(e) => settingAll(e, setSelectedKeys, selectedKeys)"
                      size="small"
                      placeholder="批量设置"
                    >
                      <a-icon slot="enterButton" type="plus" />
                    </a-input-search>
                  </div>
                  <div slot="wholesalePriceDropdown" slot-scope="setSelectedKeys, selectedKeys" style="padding: 8px">
                    <a-input-search
                      @search="(e) => settingAll(e, setSelectedKeys, selectedKeys)"
                      size="small"
                      placeholder="批量设置"
                    >
                      <a-icon slot="enterButton" type="plus" />
                    </a-input-search>
                  </div>
                  <span slot="attr_list" slot-scope="attr_list">
                    <span style="margin-right: 4px" v-for="(item, index) of attr_list" :key="index">
                      {{ item.attr_name }}
                    </span>
                  </span>
                  <div class="flex-x-center" slot="num" slot-scope="num, attrItem, attrIndex">
                    <a-input-number
                      style="width: 100px"
                      size="small"
                      :autoFocus="autoFocusData.type == 'num' && autoFocusData.index == attrIndex"
                      :value="num"
                      @change="(e) => handleChange(e, 'num', attrIndex)"
                      placeholder="请输入库存"
                    />
                  </div>
                  <div class="flex-x-center" slot="wholesale_price" slot-scope="wholesale_price, attrItem, attrIndex">
                    <a-input
                      type="number"
                      step="0.01"
                      size="small"
                      :autoFocus="autoFocusData.type == 'wholesale_price' && autoFocusData.index == attrIndex"
                      :value="wholesale_price"
                      @change="(e) => handleChange(e.target.value, 'wholesale_price', attrIndex)"
                      style="width: 100px"
                      placeholder="请输入批发价格"
                    />
                  </div>
                  <div class="flex-x-center" slot="price" slot-scope="price, attrItem, attrIndex">
                    <a-input
                      type="number"
                      step="0.01"
                      size="small"
                      :autoFocus="autoFocusData.type == 'price' && autoFocusData.index == attrIndex"
                      :value="price"
                      @change="(e) => handleChange(e.target.value, 'price', attrIndex)"
                      style="width: 100px"
                      placeholder="请输入铺货价格"
                    />
                  </div>
                  <div class="flex-x-center" slot="original_price" slot-scope="original_price, attrItem, attrIndex">
                    <a-input
                      type="number"
                      step="0.01"
                      size="small"
                      :autoFocus="autoFocusData.type == 'original_price' && autoFocusData.index == attrIndex"
                      :value="original_price"
                      @change="(e) => handleChange(e.target.value, 'original_price', attrIndex)"
                      style="width: 100px"
                      placeholder="请输入建议零售价格"
                    />
                  </div>
                  <div class="flex-x-center" slot="no" slot-scope="no, attrItem, attrIndex">
                    <a-input
                      style="margin: -5px 0; width: 100px"
                      size="small"
                      :autoFocus="autoFocusData.type == 'no' && autoFocusData.index == attrIndex"
                      :value="no"
                      @change="(e) => handleChange(e.target.value, 'no', attrIndex)"
                      placeholder="请输入货号"
                    />
                  </div>
                  <template slot="pic" slot-scope="pic, attrItem, attrIndex">
                    <div class="guige-image-box flex-x-center">
                      <div v-if="GoodsAttr[getAttrActiveIndex(attrIndex)].pic" class="goods_pic_item_box">
                        <div class="upload-img-box">
                          <img :src="GoodsAttr[getAttrActiveIndex(attrIndex)].pic" alt="" />
                          <div class="action-hover">
                            <div class="hover-bg"></div>
                            <div class="hover-body">
                              <div class="action-icons">
                                <a-icon @click="previewPic(GoodsAttr[getAttrActiveIndex(attrIndex)].pic)" type="eye" />
                                <a-icon @click="GoodsAttr[getAttrActiveIndex(attrIndex)].pic = ''" type="delete" />
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="upload-box">
                        <div class="upload-content">
                          <a-icon style="font-size: 14px; color: rgba(0, 0, 0, 0.45)" type="plus" />
                          <span style="font-size: 12px"></span>
                        </div>
                        <div class="self-com">
                          <storage-select selectNum="1" v-model="GoodsAttr[getAttrActiveIndex(attrIndex)].pic"></storage-select>
                        </div>
                      </div>
                    </div>
                  </template>
                </a-table>

                <el-pagination
                  style="margin-top:10px;"
                  :page-size="size"
                  :current-page="page"
                  background
                  layout="prev, pager, next"
                  @current-change="e => page = e"
                  :total="GoodsAttr.length">
                </el-pagination>
              </a-col>
            </a-row>
          </a-form-model-item>
          <a-divider />
        </div>
      </a-form-model>
    </a-card>

    <a-modal
      :visible="showPreviwModal"
      @ok="
        () => {
          showPreviwModal = fasle
        }
      "
      @cancel="
        () => {
          showPreviwModal = fasle
        }
      "
    >
      <div style="display: flex; justify-content: center">
        <img style="width: 300px" :src="previewImgSrc" alt="" />
      </div>
    </a-modal>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { supplierGoods } from '@/api/purchase/purchase'
import { list as attrListApi } from '@/api/goods/attr'
import { WangEditor } from '@/components'
import { cyyUploadVideo, cyyUploadImg } from '@/components/CyyUi/index'
import { list as catListApi } from '@/api/purchase/cat'

const attrColumns = [
  {
    title: '规格',
    dataIndex: 'attr_list',
    maxWidth: 450,
    scopedSlots: { customRender: 'attr_list' },
  },
  {
    title: '库存',
    dataIndex: 'num',
    maxWidth: 200,
    scopedSlots: {
      filterDropdown: 'numDropdown',
      filterIcon: 'numIcon',
      customRender: 'num',
    },
  },
  {
    title: '批发价格',
    dataIndex: 'wholesale_price',
    maxWidth: 200,
    scopedSlots: {
      filterDropdown: 'wholesalePriceDropdown',
      filterIcon: 'priceIcon',
      customRender: 'wholesale_price',
    },
  },
  {
    title: '铺货价格',
    dataIndex: 'price',
    maxWidth: 200,
    scopedSlots: {
      filterDropdown: 'priceDropdown',
      filterIcon: 'priceIcon',
      customRender: 'price',
    },
  },
  {
    title: '建议零售价',
    dataIndex: 'original_price',
    maxWidth: 200,
    scopedSlots: {
      filterDropdown: 'originalPriceDropdown',
      filterIcon: 'priceIcon',
      customRender: 'original_price',
    },
  },
  {
    title: '货号',
    dataIndex: 'no',
    maxWidth: 200,
    scopedSlots: { customRender: 'no' },
    slots: { title: 'customNo' },
  },
  {
    title: '图片',
    dataIndex: 'pic',
    // width: 20,
    scopedSlots: { customRender: 'pic' },
    slots: { title: 'customPic' },
  },
]

export default {
  components: {
    WangEditor,
    cyyUploadVideo,
    cyyUploadImg,
  },
  data() {
    let checkPic = (rule, value, callback) => {
      console.log(rule, value)
      if (!value) {
        if (rule.field == 'g_s_pic_url') {
          callback(new Error('请商品缩略图'))
        }
        if (rule.field == 'g_pic_list') {
          callback(new Error('请上传商品轮播图'))
        }
      } else {
        callback()
      }
    }
    return {
      activeTab: '1',
      form: {
        cat_id: [],
        goods_id: '',
        name: '',
        goods_no: '',
        g_s_pic_url: '',
        desc: '',
        g_price: '',
        g_original_price: '',
        g_unit: '',
        g_shop_count: '',
        g_pic_list: [],
        g_send_type: [],
        num: '',
        goods_no: '',
        use_attr: '0',
        supplier:{
          name:""
        },
        wholesale_price: 0.00,
        original_price: 0.00
      },
      attr: [],
      isAttr: 0,
      formRules: {
        name: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
        g_s_pic_url: [{ required: true, validator: checkPic, trigger: 'change' }],
        desc: [{ required: true, message: '请输入商品图文详情', trigger: 'blur' }],
        g_price: [{ required: true, message: '请输入商品价格', trigger: 'blur' }],
        g_original_price: [{ required: true, message: '请输入商品原价', trigger: 'blur' }],
        g_pic_list: [{ required: true, validator: checkPic, trigger: 'change' }],
        num: [{ required: true, message: '请输入库存', trigger: 'blur' }],
      },
      butLoading: false,
      goodsId: 0,
      previewImgSrc: '',
      showPreviwModal: false,
      // 图文详情
      desc: '',
      btnLoading: false,
      attrList: [],

      GoodsAttr: [], // 遍历后商品提交规格
      AttrGroupList: [], // 处理后的添加规格
      autoFocusData: { type: '', index: 0 }, // 获取焦点参数,
      addAttrData: { groupName: '' }, // 添加规格数据
      attrList: [], // 可选择类型
      attrColumns: attrColumns, // 商品规格表结构
      catList: [],
      page:1,
      size:30
    }
  },
  created() {
    this.getAttrList()
    var goodsId = this.$route.query.id ? this.$route.query.id : 0
    this.goodsId = goodsId
    if (this.goodsId > 0) {
      this.getGoodsData()
    }

    catListApi({ is_show: -1 }).then((res) => {
      this.catList = res.data
    })
  },

  watch: {
    AttrGroupList(val) {
      this.setGoodsAttr(val)
    },

    $route: function (val) {
      if (val.query.id > 0) {
        this.getGoodsData()
      }
    },
  },
  methods: {
    previewPic(src) {
      this.previewImgSrc = src
      this.showPreviwModal = true
    },

    // 获取商品详情
    async getGoodsData() {
      const hide = this.$message.loading('加载中...', 1000)
      const res = await supplierGoods({ id: this.goodsId })
      if (res.code == 0) {
        let good = res.data.list[0]
        if (!Array.isArray(good.pic_list)) {
          good.pic_list = JSON.parse(good.pic_list)
        }

        this.isAttr = good.use_attr
        this.is_change_attr = 0
        this.attr = good.attrs ? JSON.parse(good.attrs) : []
        this.AttrGroupList = good.AttrGroupList || []
        this.form.goods_id = good.id
        this.form.name = good.name
        this.form.goods_no = good.goods_no
        this.form.g_s_pic_url = good.pic_url
        this.form.desc = good.desc
        this.desc = good.desc
        this.form.g_price = good.price
        this.form.g_original_price = good.original_price
        this.form.g_shop_count = good.shop_count
        this.form.g_unit = good.unit
        this.form.g_pic_list = good.pic_list
        this.form.num = good.num
        this.form.goods_no = good.goods_no
        this.form.use_attr = good.use_attr
        this.form.cat_id = good.cat_id
        this.form.supplier = good.supplier
        this.form.wholesale_price = good.wholesale_price
        this.form.original_price = good.original_price

        // console.log('good.num,', good.num)
        // console.log('this.form,', this.form)

        if (good.send_type == 0) {
          this.form.g_send_type = ['1', '2']
        }
        if (good.send_type == 1) {
          this.form.g_send_type = ['1']
        }
        if (good.send_type == 2) {
          this.form.g_send_type = ['2']
        }
      }

      hide()
    },

    // 上传轮播图成功
    uploadPics(e) {
      console.log(e)
      if (this.form.g_pic_list.length < 9) {
        this.form.g_pic_list = [...this.form.g_pic_list, ...e.data]
      } else {
        this.$message.warning('最多上传9张轮播图')
      }
    },

    // 删除轮播图成功
    delPics(e) {
      console.log(e)
      this.form.pic_list.splice(e.index, 1)
    },

    /**
     * 是否使用规格
     */
    onChangeAttr(val) {
      this.isAttr = val.target.value
    },

    /**
     * 规格类型筛选
     */
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },

    /**
     * 获取添加规格类型
     */
    getAttrList() {
      attrListApi().then((res) => {
        this.attrList = res.data.list
      })
    },

    /**
     * 选中规格类型处理
     */
    attrSelectChange(e) {
      var attr = this.attrList[e]
      var AttrGroupList = []
      attr.children.forEach((element) => {
        var attrItem = []
        element.children.forEach((element2) => {
          attrItem.push({
            attr_name: element2.name,
          })
        })
        var attrGroup = {
          attr_group_name: element.name,
          attr_list: attrItem,
        }
        AttrGroupList.push(attrGroup)
      })
      this.AttrGroupList = AttrGroupList

      if (!this.is_change_attr) {
        this.is_change_attr = 1
      }
    },

    /**
     * 根据添加规格，生成规格数据
     */
    setGoodsAttr(attrGroup) {
      let attrList = []
      if (attrGroup) {
        attrList = this.setGoodsAttrItem(attrGroup, [], 0)
      }
      this.GoodsAttr = this.getAttrDataInfo(attrList)
    },
    /**
     * 处理规格数据
     */
    setGoodsAttrItem(attrGroup, attrList, index) {
      var attrList1 = []
      if (index < attrGroup.length) {
        if (index === 0 || attrList.length === 0) {
          if (attrGroup[index].attr_list.length > 0) {
            attrGroup[index].attr_list.forEach((element) => {
              element.attr_group_name = attrGroup[index].attr_group_name
              attrList1.push([element])
            })
          }
        } else {
          if (attrGroup[index].attr_list.length > 0) {
            attrList.forEach((element) => {
              attrGroup[index].attr_list.forEach((element1) => {
                element1.attr_group_name = attrGroup[index].attr_group_name
                attrList1.push(element.concat([element1]))
              })
            })
          } else {
            attrList1 = attrList
          }
        }
        ++index
        return this.setGoodsAttrItem(attrGroup, attrList1, index)
      } else {
        return attrList
      }
    },
    /**
     * 获取其他详细数据
     */
    getAttrDataInfo(attr) {
      var attrList = []

      attr.forEach((element) => {
        var setAttr = {}

        if (this.attr.length) {
          this.attr.forEach((element2) => {
            if (element2.attr_list.length === element.length) {
              var loading = true
              if (loading && this.compareAttr(element2.attr_list, element)) {
                setAttr = element2
                loading = false
              }
            }
          })
        }

        var data = {
          attr_list: element,
          num: setAttr && setAttr.num ? setAttr.num : 0,
          price: setAttr && setAttr.price ? setAttr.price : 0,
          original_price: setAttr && setAttr.original_price ? setAttr.original_price : 0,
          wholesale_price: setAttr && setAttr.wholesale_price ? setAttr.wholesale_price : 0,
          no: setAttr && setAttr.no ? setAttr.no : '',
          pic: setAttr && setAttr.pic ? setAttr.pic : '',
          share_commission_first: setAttr && setAttr.share_commission_first ? setAttr.share_commission_first : '',
          share_commission_second: setAttr && setAttr.share_commission_second ? setAttr.share_commission_second : '',
          share_commission_third: setAttr && setAttr.share_commission_third ? setAttr.share_commission_third : '',
        }
        for (const key in setAttr) {
          if (key.indexOf('member') !== -1) {
            data[key] = setAttr[key]
          }
        }
        attrList.push(data)
      })

      console.log('attrList,', attrList)
      return attrList
    },
    compareAttr(val1, val2) {
      var compareLen = 0
      val1.forEach((element1) => {
        val2.forEach((element2) => {
          if (element1.attr_name === element2.attr_name) {
            compareLen++
          }
        })
      })
      return compareLen === val1.length
    },
    /**
     * 修改规格数据
     */
    handleChange(value, type, index) {
      console.log(value)
      this.autoFocusData = {
        type: type,
        index: index,
      }
      this.GoodsAttr[this.getAttrActiveIndex(index)][type] = value === null ? '' : value
    },
    /**
     * 修改预约规格数据
     */
    handleBookChange(value, type, index) {
      console.log(value)
      this.bookFocusData = {
        type: type,
        index: index,
      }
      this.bookConfig[index][type] = value === null ? '' : value
    },
    /**
     * 添加规格组
     */
    addAttrGroup() {
      if (this.addAttrData.groupName) {
        var data = {
          attr_group_name: this.addAttrData.groupName,
          attr_list: [],
        }
        this.AttrGroupList.push(data)
      }
      this.addAttrData.groupName = ''
      if (!this.is_change_attr) {
        this.is_change_attr = 1
      }
    },
    /**
     * 添加规格值
     */
    addAttr(e, index, groupName) {
      var data = {
        attr_group_name: groupName,
        attr_name: e,
      }
      var attrGroup = this.AttrGroupList
      attrGroup[index].attr_list.push(data)
      this.AttrGroupList = null
      this.AttrGroupList = attrGroup
    },
    /**
     * 删除规格组
     */
    delAttrGroup(index) {
      this.AttrGroupList.splice(index, 1)
      if (!this.is_change_attr) {
        this.is_change_attr = 1
      }
    },
    delAttr(index1, index2) {
      var attrGroup = this.AttrGroupList
      attrGroup[index1].attr_list.splice(index2, 1)
      this.AttrGroupList = null
      this.AttrGroupList = attrGroup
      if (!this.is_change_attr) {
        this.is_change_attr = 1
      }
    },

    settingAll(e, setSelectedKeys, selectedKeys) {
      this.GoodsAttr.forEach((element, index) => {
        this.GoodsAttr[index][setSelectedKeys.column.dataIndex] = e
      })
    },
  },
  computed: {
    getAttrActiveIndex(){
      return (index)=>{
        let {page,size} = this,
        active = (page-1) * size + index;

        return active
      }
    },

    getGoodsAttrList(){
      let {GoodsAttr,page,size} = this,
      index = (page-1) * size;
      return JSON.parse(JSON.stringify(GoodsAttr)).splice(index,size) || []
    }
  }
}
</script>
<style scoped lang="less">
.sku-group {
  /deep/.ant-form-item-control-wrapper {
    width: 91%;
  }
}
.item-table {
  width: 100%;
  max-width: 1000px;
  display: inline-block;
}
.item-colunm-content {
  /deep/.ant-checkbox-group {
    display: flex;
    align-items: center;
    label {
      margin-top: 6px;
    }
  }
}
/deep/.ant-form-explain {
  margin-top: 10px;
}
/deep/.ant-tabs-bar {
  margin: 0;
}
/deep/.ant-tabs-nav .ant-tabs-tab {
  padding: 10px 0;
  margin: 0 49px 0 0;
}
.required::before {
  content: '*';
  color: red;
}
td {
  padding: 0 6px;
}
th {
  padding: 0 6px;
}
tr:hover {
  background: #f0f0f0;
}
.goods_pic_item {
  width: 80px;
  height: 80px;
  border-radius: 3px;
}

.upload-box {
  width: 104px;
  height: 104px;
  background: rgba(0, 0, 0, 0.05);
  border: 1px dashed rgba(0, 0, 0, 0.14901960784313725);
  opacity: 1;
  border-radius: 4px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  float: left;
  .upload-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .self-com {
    opacity: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 111;
    /deep/.ant-btn {
      width: 104px;
      height: 103px;
    }
    /deep/.ant-input-group-wrapper {
      width: 104px;
      height: 104px;
      .ant-input-group {
        width: 100%;
        height: 100%;
        span:nth-child(1) {
          display: none;
        }
        span:nth-child(3) {
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
        }
      }
    }
  }
}

.guige-image-box {
  .upload-box {
    width: 50px;
    height: 50px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.14901960784313725);
    opacity: 1;
    border-radius: 4px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    float: left;
    .upload-content {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }
    .self-com {
      opacity: 0;
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 111;
      /deep/.ant-btn {
        width: 50px;
        height: 49px;
      }
      /deep/.ant-input-group-wrapper {
        width: 50px;
        height: 50px;
        .ant-input-group {
          width: 100%;
          height: 100%;
          span:nth-child(1) {
            display: none;
          }
          span:nth-child(3) {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
          }
        }
      }
    }
  }

  .goods_pic_item_box {
    box-shadow: 0 0 5px rgba(170, 170, 170, 0.671);
    border-radius: 3px;
    position: relative;
    margin-right: 10px;
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.14901960784313725);
    border-radius: 4px;
    float: left;
    margin: 0 8px 0 0px;
    padding: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    .upload-img-box {
      width: 98%;
      height: 98%;
      position: relative;
      .action-hover {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 11;
        display: none;
        opacity: 0;
        transition: all 0.3s;

        .hover-bg {
          width: 100%;
          height: 100%;
          background-color: #000000;
          opacity: 0.4;
        }
        .hover-body {
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          z-index: 11;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .action-icons {
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 5px;
          .anticon {
            color: #ffffff;
            font-size: 17px;
          }
          .anticon:nth-child(1) {
            margin-right: 10px;
          }
        }
      }
      img {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
    .upload-img-box:hover > .action-hover {
      display: block;
      opacity: 1;
    }
  }
}

.video-box {
  width: 104px;
  height: 104px;
  position: relative;
  background: rgba(0, 0, 0, 0.05);
  border: 1px dashed rgba(0, 0, 0, 0.14901960784313725);
  opacity: 1;
  border-radius: 4px;
  margin-left: 8px;
  video {
    width: 100%;
    height: 100%;
  }
  .action-hover {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 11;
    display: none;
    opacity: 0;
    transition: all 0.3s;
    background-color: #000000;
    opacity: 0.4;

    .hover-bg {
      width: 100%;
      height: 100%;
      // background-color: #000000;
      // opacity: 0.4;
    }
    .hover-body {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 11;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .action-icons {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 5px;
      .anticon {
        color: #ffffff;
        font-size: 17px;
      }
      .anticon:nth-child(1) {
        margin-right: 10px;
      }
    }
  }
}
.video-box:hover > .action-hover {
  display: block;
}

.goods_pic_item_box {
  width: 80px;
  height: 80px;
  box-shadow: 0 0 5px rgba(170, 170, 170, 0.671);
  border-radius: 3px;
  position: relative;
  margin-right: 10px;
  width: 104px;
  height: 104px;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.14901960784313725);
  opacity: 1;
  border-radius: 4px;
  float: left;
  margin: 0 8px 0 0px;
  padding: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  .upload-img-box {
    width: 88px;
    height: 88px;
    position: relative;
    .action-hover {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 11;
      display: none;
      opacity: 0;
      transition: all 0.3s;

      .hover-bg {
        width: 100%;
        height: 100%;
        background-color: #000000;
        opacity: 0.4;
      }
      .hover-body {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 11;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .action-icons {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 5px;
        .anticon {
          color: #ffffff;
          font-size: 17px;
        }
        .anticon:nth-child(1) {
          margin-right: 10px;
        }
      }
    }
    img {
      width: 100%;
      height: 100%;
      display: block;
    }
  }
  .upload-img-box:hover > .action-hover {
    display: block;
    opacity: 1;
  }
}

.distribution-table {
  /deep/.ant-table-small {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.14901960784313725);
    border-radius: 4px;
    .ant-table-body {
      padding: 10px 0;
      margin: 0 12px;
      .ant-table-thead {
        height: 54px;
        background: #fafafa;
        border-radius: 4px 4px 0px 0px;
        border-bottom: 1px solid#E8E8E8;
      }
      tr {
        td {
          padding-top: 15px !important;
          padding-bottom: 15px !important;
        }
      }
    }
  }
}

.goods_pic_item_box .icon {
  position: absolute;
  top: 2px;
  right: 2px;
  /* margin-right: 10px; */
}
.timeSlot {
  display: flex;
  align-items: center;
}
.timePrice div {
  display: flex;
  align-items: center;
  span {
    margin-right: 10px;
    width: 100px;
    min-width: 60px;
  }
}
.tips {
  display: flex;
  flex-direction: column;
  color: #d9534f;
  font-size: 14px;
  span {
    line-height: normal;
  }
}
.tip {
  color: #8c8c8c;
}
.add {
  display: inline-block;
  position: relative;
  .add-action {
    position: absolute;
    right: 1px;
    top: 1px;
    width: 40px;
    height: 29px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    border-left: 1px solid #d9d9d9;
    cursor: pointer;
  }
}
.warning {
  font-size: 14px;
  font-family: PingFangSC-Regular;
  line-height: 22px;
  color: rgba(0, 0, 0, 0.45);
  margin-top: 10px;
}
.table {
  width: 100%;
  margin-top: 36px;
  padding: 10px 12px;

  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.14901960784313725);
  opacity: 1;
  border-radius: 4px;
  .table-body {
    .ant-row {
      min-height: 54px;
      opacity: 1;
      border-radius: 4px 4px 0px 0px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #e8e8e8;
    }
    .self-th {
      background: #fafafa;
    }
  }
  .title {
    .ant-col {
      text-align: center;
      padding: 0 10px;
      font-size: 14px;
      font-family: PingFangSC-Medium;
      line-height: 22px;
      color: rgba(0, 0, 0, 0.85);
    }
  }
}
.list {
  .item {
    background-color: #fff;
    padding: 5px;
    display: flex;
    align-items: center;
    .ant-col {
      text-align: center;
      padding: 0 10px;
    }
  }
}
.tr-row:hover {
  background-color: #e6f7ff;
}

.tip {
  margin: 0;
  padding: 0;
  font-size: 12px;
  line-height: normal;
  text-align: left;
}
.form-title {
  margin-bottom: 24px;
  width: 64px;
  height: 22px;
  font-size: 16px;
  font-family: PingFangSC-Medium;
  line-height: 24px;
  color: rgba(0, 0, 0, 0.85);
  opacity: 1;
}
.lable-margin24 {
  .ant-form-item-label {
    margin: 24px 0;
  }
}
.guige-table {
  /deep/.ant-table-thead {
    background: #fafafa;
  }
}

.guige-label {
  color: rgba(0, 0, 0, 0.85);
  text-align: right;
}

// 搜索input
.add-guige {
  /deep/.ant-input-wrapper {
    .ant-input {
      width: 172px;
      height: 28px;
    }
    .ant-input-search-button {
      height: 28px;
      line-height: 28px;
      width: 28px;
      text-align: center;
      background: #fff;
      color: rgba(0, 0, 0, 0.45);
      border-color: rgb(217, 217, 217);
    }
  }
}
</style>
